<template>
	<view class="page">	
		<!-- 头部 -->
		<!-- #ifdef MP-WEIXIN -->
			<topVue>
				<image 
					src="../../static/back.png" 
					style="width: 38rpx; height: 38rpx; left: 30rpx;" 
					class="absolute-middle"
					@click="$tools.back(1)"
				></image>
				<text class="fw600 fs32 absolute-auto">活动详情</text>
			</topVue>
		<!-- #endif -->
		
		<!-- banner -->
		<view class="banner margin20"></view>
		
		<view class="boxVue">
			<view class="fw600 fs32">缘聚此刻，爱启新章 —— 相亲寻缘盛会</view>
			
			<view class="flex align-center margin30">
				<u-icon name="clock" color="#666" size="32"></u-icon>
				<text class="fs24 padding-row10" style="color: #666;">07-07 14：30</text>
			</view>
			
			<view class="flex align-center margin20">
				<u-icon name="map" color="#666" size="34"></u-icon>
				<text class="fs24 padding-row10" style="color: #666;">武汉市洪山区东湖风景区体育馆</text>
			</view>
			
			<view class="fw600 fs28 margin50">发起人</view>
			
			<view class="son padding40 margin20 flex">
				<u-avatar src="1" size="96"></u-avatar>
				<view class="right flex-column flex-between">
					<view class="flex align-center">
						<view class="fs30 fw600">岳克茜</view>
						<u-tag
							text="已实名" 
							shape="circle" 
							bg-color="#FF9571" 
							color="#fff" 
							border-color="#FF9571" 
							size="mini" 
							style="margin-left: 20rpx;"/>
					</view>
					<text>已成功举办12场活动</text>
				</view>
			</view>
			
			<view class="fw600 fs28 margin50">报名</view>
			<view class="number margin20">
				已报名<text class="fw600">34</text>人，剩余名额<text class="fw600 color">6</text>人
			</view>
			<view class="flex-wrap w100">
				<u-avatar src="1" size="90" class="avatar" v-for="(item, index) in 25" :key="index"></u-avatar>
			</view>
			
			<view class="fw600 fs28 margin50">活动介绍</view>
			<view class="son padding30 margin20">
				<text>周十科边采问本分实门边导达九是品国而联才很铁因常 增千四条劳与到干通回议。 什领导交而住己便色片象想声持三易达查出青影议叫亲 住性色引物关空九三劳且强三议民。 采住他机叫值程花程广严青治层际只眼十回打深公七器 步务却克的地专能周至结重角样能治界起断指安但采区 必或对南难属军受于会进我化王外王能几色北北南律称 向清直。思资积元最山斗江重器般为通单据空府况照展 查听展此王易定把次处论近己切存油做公去命与世部开 义平少。</text>
			</view>
			
			<view class="fw600 fs28 margin50">注意事项</view>
			<view class="son padding30 margin20">
				<view class="tip">一、主动配合安检</view>
				<view class="tip">二、携带物品要求</view>
				<view class="tip">三、文明观看演出</view>
			</view>
		</view>
		
		<view class="botVue flex-between align-center">
			<view class="more fw600 fs30" @click="$tools.jumpTab('../activity/index')">更多活动</view>
			<view class="apply fs30 fw600" @click="show = true">立即报名</view>
		</view>
		
		<!-- 报名支付方式 -->
		<u-popup v-model="show" mode="bottom" :closeable="true" close-icon-size="26" close-icon-color="#999">
			<view class="popupVue">
				<view class="title fw600 fs36 text-center">支付方式 </view>
				<view class="li flex align-center margin30" @click="pay=1">
					<image src="../../static/index/selected.png" style="width: 32rpx; height: 32rpx;" v-if="pay===1"></image>
					<image src="../../static/index/select.png" style="width: 32rpx; height: 32rpx;" v-else></image>
					<text>微信支付</text>
				</view>
				<view class="li flex-between align-center margin0" @click="pay=2">
					<view class="flex align-center">
						<image src="../../static/index/selected.png" style="width: 32rpx; height: 32rpx;" v-if="pay===2"></image>
						<image src="../../static/index/select.png" style="width: 32rpx; height: 32rpx;" v-else></image>
						<text>次卡抵扣</text>
					</view>
					<text style="color: #999; font-size: 28rpx;">剩余3次</text>
				</view>
				<view class="li flex-between align-center margin0" @click="pay=3">
					<view class="flex align-center">
						<image src="../../static/index/selected.png" style="width: 32rpx; height: 32rpx;" v-if="pay===3"></image>
						<image src="../../static/index/select.png" style="width: 32rpx; height: 32rpx;" v-else></image>
						<text>年卡抵扣</text>
					</view>
					<text style="color: #999; font-size: 28rpx;">剩余3次</text>
				</view>
				<view class="btnVue flex-column align-center margin70">
					<text></text>
					<text v-if="pay===1">支付金额：￥100</text>
					<text v-if="pay===2">次卡抵扣</text>
					<text v-if="pay===3">年卡抵扣</text>
					<view class="apply" @click="applyFun()">确认</view>
				</view>
			</view>
		</u-popup>
		
		<!-- 报名成功 -->
		<u-popup v-model="show20" mode="center" >
			<view class="popVue relative">
				<image src="../../static/index/success.png" style="width: 218rpx; height: 258rpx; top: 0; z-index: 99;" class="absolute-center"></image>
				<view class="popupContent absolute">
					<view class="title fw600 fs36 text-center">报名成功</view>
					<view class="text-center margin40 fw600 padding-row30" style="line-height: 1.4;">
						恭喜您，你报名参加“缘聚此刻，爱启新章 —— 相亲寻缘盛会”已成功
					</view>
					<view class="btnVue flex-center margin80">
						<view class="toShow" @click="$tools.route('../person/activity_join')">前往查看</view>
					</view>
				</view>
			</view>
		</u-popup>
	</view>
</template>

<script>
	export default {
		data(){
			return {
				show: false,
				show20: false,
				pay: 1
			}
		},
		methods: {
			applyFun(){
				
			}
		}
	}
</script>

<style lang="less" scoped>
	/deep/.u-mode-center-box{
		background-color: transparent !important;
	}
	/deep/.u-drawer-bottom {
		background-color: transparent !important;
	}
	.page {
		padding-bottom: 180rpx;
		.popVue {
			width: 600rpx;
			height: 700rpx;
			.popupContent {
				width: 600rpx;
				height: 600rpx;
				background: linear-gradient(180deg, #F0E9F8, #F0E9F8, #FDE5E7, #FBEFF1, #FDFAFC, #fff);;
				left: 0;
				bottom: 0;
				border-radius: 40rpx;
				.title {
					color: #333;
					padding-top: 178rpx;
				}
				.toShow {
					width: 500rpx;
					height: 84rpx;
					line-height: 84rpx;
					text-align: center;
					border-radius: 42rpx;
					background: #FC132F;
					border-radius: 42rpx;
					color: #fff;
					font-weight: 600;
				}
			}
		}
		.popupVue {
			width: 100%;
			padding: 50rpx;
			background: #fff;
			border-radius: 30rpx 30rpx 0 0;
			.title {
				color: #333;
			}
			.li {
				width: 100%;
				height: 140rpx;
				border-bottom: 1rpx solid #EEE;
				text {
					color: #333;
					font-size: 32rpx;
					padding-left: 20rpx;
				}
			}	
			.btnVue {
				width: 100%;
				text {
					color: #333;
					font-size: 30rpx;
					font-weight: 600;
				}
				.apply {
					width: 520rpx;
					height: 84rpx;
					line-height: 84rpx;
					text-align: center;
					border-radius: 42rpx;
					background: #FC132F;
					border-radius: 42rpx;
					color: #fff;
					font-weight: 600;
					margin-top: 20rpx;
				}
			}		
		}
	}
	.banner {
		width: 690rpx;
		height: 320rpx;
		background: #f5f5f5;
		border-radius: 16rpx;
	}
	.boxVue {
		width: 100%;
		padding: 30rpx;
		.son {
			width: 690rpx;
			background: #f5f5f5;
			border-radius: 16rpx;
			text {
				color: #666;
				line-height: 1.6;
			}
			.tip {
				color: #666;
				line-height: 2.2;
			}
			.right {
				flex: 1;
				padding: 10rpx 0 10rpx 20rpx;
				text {
					font-size: 24rpx;
					color: #333;
				}
			}
		}
		.number {
			color: #666;
			font-size: 24rpx;
			.color {
				color: #FC132F;
			}
		}
		.avatar {
			margin-right: 30rpx;
			margin-top: 30rpx;
		}
		.avatar:nth-child(6n) {
			margin-right: 0;
		}
	}
	.botVue {
		width: 100%;
		height: 160rpx;
		background: #fff;
		position: fixed;
		left: 0;
		bottom: 0;
		padding: 0 30rpx;
		.more {
			width: 220rpx;
			height: 96rpx;
			background: #FFFFFF;
			border-radius: 48rpx;
			border: 1rpx solid #FC132F;
			color: #FC132F;
			text-align: center;
			line-height: 96rpx;
		}
		.apply {
			width: 426rpx;
			height: 96rpx;
			background: #FC132F;
			border-radius: 48rpx;
			text-align: center;
			line-height: 96rpx;
			color: #FFFFFF;
		}
	}
</style>